<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入门第二课</title>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <span>-------------------------v-on:----------反转消息--------------------------</span>
        <p>{{ message }}</p>
        <button @click="reverseMessage"
            style="background-image: linear-gradient(-225deg, #77FFD2 0%, #6297DB 48%, #1EECFF 100%); height: 60px;width: 100px;border-radius:15px;">反转消息</button>


        <div>
            <span>-------------------v-model------------------------------------------</span>
            <p style="background-image: linear-gradient(-225deg, #7742B2 0%, #F180FF 52%, #FD8BD9 100%);"> {{msg}}</p>
            <input v-model="msg">

        </div>
        <div>
            <span>---------------------------- 生命周期 钩子函数---------------------------------</span>
            <p> 你要显示的内容: {{x}} </p>

        </div>
        <span>--------------------------Json数据常用操作-----------------------------------</span>


    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '我叫贾维斯',
                msg: '这个是要显示的消息',
                x: "",
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            },
            created: function () {
                //Resume  生命周期    钩子函数 onCreated onResume onStart onStop
                this.x = "就这就这???"
                console.log("created调用成功！！！")
            },
            beforeCreate: function () {
                console.log("beforeCreate调用成功!!!!!!")
            },
            beforeMonunt: function () {
                console.log("beforeMonunt调用成功!!!!!!")
            },
            mounted: function () {
                console.log("mounted调用成功!!!!!!")
            },
            //调用先后顺序 ：beforeCreate > created > beforeMount > mounted > beforeUpdate > Updated > beforeDestroy > destroyed
        })

        //Json数据常用操作
        //    JSON字符串:
        var str1 = '{ "name": "李光通", "sex": "真男人" }';
        //JSON对象:
        var str2 = { "name": "宇智波佐助", "sex": "男" };

        // 1.字符串转JSON
        var obj = JSON.parse(str1);

        // 2.JSON转字符串
        var str = JSON.stringify(obj);

        // 3.JSON增加元素
        // obj['key'] = value;

        // 4.JSON删除元素
        // delete obj["key"];

        // 5.JSON按数字排序
        // obj.sort(sortBy('key', false, parseInt));

        // 6.JSON按字符串排序
        // obj.sort(sortBy('key', false, String));




    </script>



</body>

</html>